<template>
  <div class='content'>
    <div class="profile_page">
      <head-top :go-back='goBack' :head-title="profiletitle"></head-top>
    </div>
    <div class="formContain">
      <ul>
        <li class="flex">
          <span class="label">合同编号</span>
          <div>
            <span class="vtext">{{datas.contrNo}}</span>
          </div>
        </li>
        <li class="flex" v-show="nameShow">
          <span class="label">姓名</span>
          <div>
            <span class="vtext">{{datas.personName}}</span>
          </div>
        </li>
        <li class="flex">
          <span class="label"><i class="require">*</i>终止解除时间</span>
          <div @click="showdatepicker($event,'terminalTime')">
            <input type="text"  placeholder="请选择时间" :value="datas.terminalTime"  readonly>
            <img src="@/assets/images/img/calendarIcon.png" alt="" srcset="" >
          </div>
        </li>
        <li class="flex">
          <span class="label">竞业限制期限(月)</span>
          <div>
            <van-field class='full_width' v-model="datas.competLimitTerm" placeholder="请输入竞业限制期限" type="text" input-align="right"/>
          </div>
        </li>
        <li class="flex">
          <span class="label">经济补偿金额(元)</span>
          <div>
            <van-field class='full_width' v-model="datas.ecoCompensation" placeholder="请输入经济补偿金额" type="text" input-align="right"/>
          </div>
        </li>
        <li class="flex">
          <span class="label">合同违约金额(元)</span>
          <div>
            <van-field class='full_width' v-model="datas.contrPenalty" placeholder="请输入合同违约金额" type="text" input-align="right"/>
          </div>
        </li>
        <li class="flex">
          <span class="label">医疗补助费(元)</span>
          <div>
            <van-field class='full_width' v-model="datas.medicSubsidy" placeholder="请输入医疗补助费" type="text" input-align="right"/>
          </div>
        </li>
        <li class="flex">
          <span class="label">一次性补贴金额(元)</span>
          <div>
            <van-field class='full_width' v-model="datas.oneOffSubsidy" placeholder="请输入一次性补贴金额" type="text" input-align="right"/>
          </div>
        </li>
        <li class="flex">
          <span class="label">工伤就业补助费(元)</span>
          <div>
            <van-field class='full_width' v-model="datas.jobInjuryAndEmploySubsidy" placeholder="请输入工伤就业补助费" type="text" input-align="right"/>
          </div>
        </li>
        <li class="flex">
          <span class="label">其它费用(元)</span>
          <div>
            <van-field class='full_width' v-model="datas.otherCost" placeholder="请输入其它费用" type="text" input-align="right"/>
          </div>
        </li>
        <li class="flex">
          <span class="label">实际应付金额(元)</span>
          <div>
            <van-field class='full_width' v-model="datas.realPay" placeholder="请输入实际应付金额" type="text" input-align="right"/>
          </div>
        </li>
        <li class="flex">
          <span class="label"><i class="require">*</i>终止解除原因</span>
          <div>
            <van-field class='full_width' v-model="datas.terminalCause" placeholder="请输入终止解除原因" type="text" input-align="right"/>
          </div>
        </li>
        <li class="flex">
          <span class="label"><i class="require">*</i>终止解除类型</span>
          <div @click="showpicker($event,'4003','终止解除类型')">
            <input type="text"  placeholder="请选择" :value="datas['4003'].text"  readonly>
            <span class="iconfont icon-xiala"></span>
          </div>
        </li>
        <li class="flex">
          <span class="label">备注</span>
          <div>
            <van-field class='full_width' v-model="datas.remark" placeholder="请输入备注" type="text" input-align="right"/>
          </div>
        </li>
      </ul>
    </div>
    <div class="align_center foot-button">
      <van-button class="cancel-btn" type="primary" @click="$router.go(-1)">取消</van-button>
      <van-button class="primary-btn" type="primary" @click="saveData">提交</van-button>
    </div>
    <van-popup v-model="pickershow" position="bottom">
      <van-picker  value-key="text"  show-toolbar  :title="title" :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
    </van-popup>
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker type="date" @confirm="datetimeSelect" @cancel='cancel' v-model="currentTime"/>
    </van-popup>
  </div>
</template>

<script>
  var that;
  import headTop from '@/components/header/head'
  import titlebar from '@/components/titlebar3/titlebar3';
  import {getUserInfo, getContract, saveCertificate,getDataByTaskId1,getWageAccount,updateCloseSysTask} from '@/service/getData';
  import {setStore,getStore,getDefault} from '@/assets/config/mUtils';
  import {Dialog, Toast} from 'vant';
  import MyNumberInput from '@/components/numberInput/numberInput';
  import {getUser} from '@/service/getData';

  export default {
    data() {
      return {
        company: "",//所属公司
        profiletitle: '待办事项',
        goBack: true,
        titleLeft: '基本信息',
        titleLeft1: '合同信息',
        show: false, //控制日期显示隐藏
        nameShow: false,
        pickershow: false,//控制下拉选显示隐藏
        pickerName: '',//当前控制日期的控件
        currentTime: new Date(),
        title:'标题',//下拉框标题
        fileName: '',
        feedback: '',
        datas: {
          id:'',
          personName:'',
          contrNo:'',
          terminalTime: '',
          '4003':{text:'',id:''},
          competLimitTerm:'',
          ecoCompensation:'',
          contrPenalty:'',
          medicSubsidy:'',
          oneOffSubsidy:'',
          jobInjuryAndEmploySubsidy:'',
          otherCost:'',
          realPay:'',
          terminalCause:'',
          remark:'',
        },
        partyFigureText: '',
        lookUrl: '',
        useType: 'apply',
        screenHeight: '',
        applyType: '',
        columns:[],
        codeSet:{},
        taskId:''
      }
    },
    created() {
      that = this;
      var taskType = this.$route.params.taskType;
      this.taskType = taskType;
      if(taskType =='3185000009'){
        this.nameShow = true;
      }
      var empId = this.$route.params.empId;
      var taskId = this.$route.params.taskId;
      this.taskId = taskId;
      var taskRelationId = this.$route.params.taskRelationId;
      this.codeSet = this.$store.state.codeSet;
      console.log(this.codeSet,"代码集");
      if(taskType == '3185000022'){
        var data = {};
        data.app_userId = getStore('user_id');
        data.id = empId;
        data.CHECK_TIME = new Date().getTime().toString();
        data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME + "3a28fba00c015e0df7f88556c91cb7fc");
        getContract(data).then(res1 => {
          console.log(res1);
          this.datas.id = res1.data.id;
          this.datas.contrNo = res1.data.contrNo;
          this.datas.remark = res1.data.remark;
        });
      }else if(taskType == '3185000009'){
        var taskData = getDefault();
        taskData.taskId = taskId;
        var taskUrl='/mvc/webcontractservices/getDataByTaskIdMin';
        getDataByTaskId1(taskUrl,taskData).then(res => {
          console.log(res);
          if(res.data!= null){
           this.datas.id = res.data.id;
          this.datas.personName = res.data.personName;
          this.datas.remark = res.data.remark;
          }
        })
      }


    },
    mounted() {
      const _self = this;
      this.screenHeight = document.documentElement.clientHeight;
    },
    components: {
      headTop,
      titlebar,
      MyNumberInput
    },
    updated() {
      let that = this;
      this.$nextTick(function () {
        let $inputs = Array.from(document.getElementsByTagName('input'));
        /*let body = document.body;
        $inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题，可省略
            item.onblur = function () { // onblur是核心方法
                clearTimeout(body.timer);
                body.timer = setTimeout(() => {
                window.scroll(0, 0);
                window.innerHeight = window.outerHeight = that.screenHeight
                }, 150)
            }
            item.onfocus = function () {
                clearTimeout(body.timer)
            }
        })*/
        let body = document.body;
        $inputs.forEach(item => {
          item.onblur = function () { // onblur是核心方法
            window.scroll(0, 0);
            window.innerHeight = window.outerHeight = that.screenHeight;
            //console.log(that.screenHeight);
          }
        })
      })
    },
    filters:{
      dictNum:function(val,arg1){
        if(val!=""){
          var arr = that.codeSet[arg1].filter(item=>item.id === val);
//          console.log(val,arr);
          return arr[0].text;
        }

      }
    },
    methods: {
      addZero(num){
        var addNum = num<10?"0"+num:num;
        return addNum;
      },
      datetimeSelect(value){
        this.show = false;
        var date = value;
          var val = date.getFullYear() + '-'+this.addZero(date.getMonth()+1) + '-'+ this.addZero(date.getDate());
        this.$set(this.datas,this.pickerName,val);

      },
      showpicker(event,name,title){
        this.columns = this.codeSet[name];
        this.pickershow = true;
        this.pickerName = name;
        this.title = title;
      },
      cancel() {
        this.show = false;
      },
      onConfirm(value){
        this.$set(this.datas,this.pickerName,value);
        this.pickershow = false;
        console.log(this.datas);
      },
      onCancel(){
        this.pickershow = false;
      },
      showdatepicker(event,name){
        this.show = true;
        this.pickerName = name;
      },
      saveData() {
        if(this.datas.terminalCause == '' || this.datas.terminalTime == ''|| this.datas['4003'].id == ''){
          Toast({
            message:'必填项不能为空!',
            duration:'1000',
          });
          return;
        };
//        Toast.loading({
//          duration: 0,   // 持续展示 toast
//          mask: true,
//          message: '正在提交...'
//        });

        var data = this.datas;
        data.app_userId = getStore('user_id');
        data.CHECK_TIME = new Date().getTime().toString();
        data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME + "3a28fba00c015e0df7f88556c91cb7fc");
        data.terminalType = this.datas['4003'].id;
        console.log(data);
        if(this.taskType == '3185000022'){
          var reqUrl = '/mvc/personcontrtermin/save';
        }else {
          var reqUrl = '/mvc/personcontrtermin/saveOA';
        }

        saveCertificate(reqUrl, data).then(res => {
          Toast.clear();
          var updata = getDefault();
          updata.taskId = this.taskId;
          updateCloseSysTask(updata).then(res=>{
            Toast.clear();
            this.$router.go(-1);
          })
        })
      },

    }
  }

</script>

<style lang="scss" scoped>
  @import '../../../assets/style/mixin';
  @import '../../../assets/style/public';

  .formContain {
    background: #fff;
    ul {
      padding: 0 .54rem;
      .flex {
        justify-content: space-between;
        align-items: center;
        line-height: 2rem;
        border-bottom: 1px solid #e0e0e0;
        padding: 0 .3rem;
        &:nth-last-of-type(1) {
          border: none;
        }
        .label {
          font-size: .56rem;
          line-height: 2rem;
          color: #333333;
        }
        div {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          position: relative;
          flex-grow: 1;
          img {
            width: .68rem;
            height: .64rem;
          }
          input {
            color: #323233;
            text-align: right;
            font-size: .48rem;
            padding-right: .48rem;
            border: none;
            &:-ms-input-placeholder {
              color: #aaa;
              font-size: .48rem;

            }
          }
          .file {
            width: 2rem;
            height: 1rem;
            font-size: 10rem;
            opacity: 0;
            position: absolute;
            right: 0;
          }
          .van-cell {
            font-size: .48rem;
            padding-right: .48rem;
            padding: 0;
            color: #aaa;
            .van-field__control {
              color: #aaa;
            }
          }

        }
      }
    }
  }

  .foot-button {
    margin-top: 2rem;
    margin-bottom: .4rem;
    .cancel-btn {
      margin-right: 1rem;
    }
  }

  #datetime-picker, #picker {
    position: fixed;
    width: 100%;
    bottom: 0;
  }

  .require {
    color: red;
    margin-right: 4px;
    font-style: inherit;
    font-size: 14px;
  }
  .vtext{
    font-size: 0.48rem;
  }
</style>
